<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="HTML5VisualizationPlayer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在播放 - {{ music.song_name }}</title>
    <link type="text/css" rel="stylesheet" href="/static/player/css/main.css">
    <link type="text/css" rel="stylesheet" href="/static/player/css/player.css">
    <link rel="Shortcut Icon" href="/static/player/images/icon.png">
    <script src="/static/player/js/player.js" type="text/javascript"></script>
</head>

<body>
<h1 style="text-align: center;margin-top:30px;color: orangered;font-family: 楷体">正在播放 - {{ music.song_name }}</h1>
<div class="play-box" style="margin-bottom: 12%">
    <player></player>
    <div class="player-tips"></div>
</div>

<!-- 额外添加一个音频播放器作为备用 -->
<div class="fallback-player" style="text-align: center; margin-top: 20px; display: none;">
    <p>如果可视化播放器无法播放，请使用下方播放器：</p>
    <audio controls id="fallbackAudio" style="width: 80%;">
        <source src="{{ music.url }}" type="audio/mpeg">
        您的浏览器不支持音频播放功能。
    </audio>
</div>

</body>
<script type="text/javascript">
    // 音乐URL检查和错误处理函数
    function checkAudioURL(url) {
        // 验证URL是否为空
        if (!url || url.trim() === '') {
            console.error('音乐URL为空');
            document.querySelector('.fallback-player').style.display = 'block';
            return false;
        }
        return true;
    }

    // 获取音乐URL
    var musicURL = "{{ music.url }}";
    
    // 检查URL是否有效
    var isURLValid = checkAudioURL(musicURL);
    
    // 尝试初始化播放器
    try {
        var player = new Player();
        player.init({
            autoPlay: true,//自动播放
            effect: 0,//频谱效果,不设置或0为随机变化,1为条形柱状,2为环状声波,3 心电图效果
            color: null,//颜色 color:16进制颜色代码,不设置或设置为空(空字符或null)将随机使用默认颜色
            button: {//设置生成的控制按钮,不设置button默认全部创建
                prev: true,//上一首
                play: true,//播放,暂停
                next: true,//下一首
                volume: true,//音量
                progressControl: true,//是否开启进度控制
            },
            event: function (e) {
                //这是一个事件方法,点击控制按钮会到此方法
                //参数:e.eventType 事件类型
                //参数:e.describe 事件详情,或参数
                //e.eventType  prev: 点击上一首,next：点击下一首,play:点击 播放/暂停
                console.log(e);
                
                // 如果播放失败，显示备用播放器
                if (e.eventType === 'error') {
                    document.querySelector('.fallback-player').style.display = 'block';
                }
            },
            energy: function (value) {
                //此时播放的能量值,时刻变化
                //console.log(value);
            },
            playList: [//播放列表
                {
                    title: "{{ music.song_name }}", //音乐标题
                    album: "{{ music.composer }}", //所属专辑
                    artist: "{{ music.artist_name }}", //艺术家
                    mp3: musicURL, //音乐路径
                }
            ]
        });
    } catch (e) {
        console.error('播放器初始化失败：', e);
        document.querySelector('.fallback-player').style.display = 'block';
    }
    
    // 为备用播放器添加事件监听
    document.getElementById('fallbackAudio').addEventListener('error', function() {
        alert('音乐无法播放，请检查音乐链接是否有效！');
    });
</script>

</html>